import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:lesson1/models/category.dart';
import 'package:lesson1/models/doctor.dart';
import 'package:lesson1/pages/detail.dart';

class Main extends StatefulWidget {
  const Main({super.key});

  @override
  State<Main> createState() => _MainState();
}

class _MainState extends State<Main> {
  final List<CategoryModel> categoriesData = CategoryModel.getCategories();
  final List<DoctorModel> doctorsData = DoctorModel.getDoctors();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          header(),
          categories(),
          doctors(),
        ],
      )
    );
  }

  /// 头部
  Container header() {
    return Container(
      color: Color(0xff51A8FF),
      height: 350,
      padding: const EdgeInsets.all(16), /// 设置内边距为16 EdgeInsets.all 是对四个方向的边距设置相同的值 EdgeInsets.only 是对四个方向的边距设置不同的值
      width: double.infinity, /// 设置宽度为屏幕宽度
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,  /// 设置主轴方向为居中
        crossAxisAlignment: CrossAxisAlignment.start, /// 设置交叉轴方向为左对齐
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,  /// 设置主轴方向为两端对齐
            /// 欢迎词
            children: [
              const Text(
                "Hi, Edi",
                style: TextStyle(fontSize: 16, color: Colors.white),
              ),
              /// 消息提示
              Container(
                  height: 50,
                  width: 50,
                  decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.1),
                      borderRadius: BorderRadius.all(
                        Radius.circular(10),
                      )
                  ),
                  child: SvgPicture.asset(   /// 设置SVG图片
                    'assets/vectors/notification.svg', /// 设置SVG图片的路径
                    fit: BoxFit.none,   /// 设置SVG图片的缩放方式
                  )
              ),
            ],
          ),

          /// 标题
          Text(
            "Let's find\nyour top doctor",
            style: TextStyle(
              fontSize: 28,
              color: Colors.white,
              fontWeight: FontWeight.w600,
            ),
          ),

          SizedBox(height: 30),    /// 设置高度为30 SizedBox的作用是设置组件的高度

          /// 搜索框
          TextField(   /// 输入框
            decoration: InputDecoration(   /// 设置输入框的样式
                filled: true,   /// 是否填充背景颜色
                fillColor: Colors.white,   /// 填充颜色
                /// 设置前缀图标
                prefixIcon: Icon(
                  Icons.search,
                  color: Colors.grey,
                  size: 25,
                ),

                /// 提示词
                hintText: "Search doctor ...",  /// 提示文本
                hintStyle: TextStyle(     /// 设置提示文本的样式
                  fontWeight: FontWeight.w300,  /// 设置提示文本的字体为300
                ),
                border: OutlineInputBorder(      /// 设置边框样式
                    borderSide: BorderSide.none,   /// 设置无边框
                    borderRadius: BorderRadius.all(   /// 设置所有边角
                        Radius.circular(50)   /// 设置边角为50
                    )
                ),
                suffixIcon: Icon(
                  Icons.clear,
                  color: Colors.grey,
                  size: 20,
                )
            ),
          ),
        ],
      ),
    );
  }

  /// 类别
  Column categories() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.only(
            top: 16,
            left: 16,
          ),
          child: Text(
            "categories",
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w500
            ),
          ),
        ),
        Container(
          height: 50,
          margin: EdgeInsets.all(16),
          /// ListView 是一个可滚动的组件，用于显示一系列的子项, separated 是 ListView 的一个方法，用于生成每个子项之间的分隔符
          child: ListView.separated(
            scrollDirection: Axis.horizontal,   /// 设置主轴方向为水平
            /// itemBuilder 是一个函数，用于生成每个子项的 Widget
            itemBuilder: (context, index) {
              return GestureDetector(
                /// 点击事件
                onTap: () => {
                  setState(() {
                    for(var item in categoriesData) {
                      item.isSelected = false;
                    }
                    categoriesData[index].isSelected = true;
                  })
                },
                child: Container(
                  width: 50,
                  height: 50,
                  /// 设置属性
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,  /// 设置形状为圆形
                    boxShadow: [             /// 设置阴影
                      BoxShadow(
                        color: categoriesData[index].isSelected ? Color(0xff51A8FF).withOpacity(0.45) : Color(0xff050618).withOpacity(0.05),
                        offset: Offset(0, 4),
                        blurRadius: 25,
                      )
                    ],
                    color: categoriesData[index].isSelected ? const Color(0xff51A8ff) : Colors.white,
                  ),
                  child: SvgPicture.asset(
                    categoriesData[index].vector,
                    fit: BoxFit.none,
                  ),
                ),
              );
            },
            /// separatorBuilder 是一个函数，用于生成每个子项之间的分隔符
            separatorBuilder: (context, index) => const SizedBox(width: 50),
            /// itemCount 是一个整数，表示子项的数量
            itemCount: categoriesData.length),
        )
      ],
    );
  }

  /// 医生
  Widget doctors() {
    return ListView.separated(
      shrinkWrap: true,  /// 高度设置为自适应
      padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
      itemBuilder: (context, index) {
        /// 内容区域
        return GestureDetector(
          onTap: () => {
            Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPages(doctorModel: doctorsData[index])))
          },
          child: Container(
            width: double.infinity,
            /// 高度
            height: 100,
            /// 样式区域
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Color(0x51A8FF).withOpacity(0.07),
                  offset: Offset(0, 4),
                  blurRadius: 20,
                )
              ],
            ),
            child: Row(
              children: [
                /// 头像
                Container(
                  width: 105,
                  decoration: BoxDecoration(
                    color: doctorsData[index].imageBox,
                    borderRadius: BorderRadius.circular(16),
                    image: DecorationImage(
                      alignment: Alignment.bottomCenter,
                      image: AssetImage(doctorsData[index].image)
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(12),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        doctorsData[index].name,
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Text(
                        doctorsData[index].specialties.first,
                        style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 12,
                        ),
                      ),
                      Spacer(),   /// 占据剩余空间
                      Row(
                        children: [
                          Icon(
                            Icons.star,
                            color: Colors.yellow,
                            size: 18,
                          ),
                          SizedBox(width: 5,),
                          Text(
                            doctorsData[index].score.toString(),
                            style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: 12,
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      },
      separatorBuilder: (context, index) => const SizedBox(height: 15,),
      itemCount: doctorsData.length,
    );
  }
}